<!-- 利润统计 -->
<template>
	<view class="content">

		<view class="earn">
			<view class="earn-tab">
				<text class="benefit">100</text>
				<text>今日总收益(USDT)</text>
				<text>日成交金额 10</text>
				<!-- <text>合约收益 90</text> -->
			</view>
			<view class="earn-tab">
				<text class="benefit">100</text>
				<text>历史总收益(USDT)</text>
				<text>累计成交额 10</text>
				<!-- <text>合约收益 90</text> -->
			</view>
		</view>

		<view class="dropdown">
			<u-dropdown>
				<u-dropdown-item v-model="market" title="市场" :options="marketList"></u-dropdown-item>
				<u-dropdown-item v-model="model" title="模型" :options="modelList"></u-dropdown-item>
				<u-dropdown-item v-model="coin" title="币种" :options="coinList"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="item-strategy" v-for="i in 10">
			<view class="head"> 
				<text>AI金字塔 </text>
				<text>huobi-u本位-btc </text>
			</view>
			<view class="summary">
				<view class="summary-title row">

					<text>今日利润</text>
					<text>累计利润</text>
					<text>年化收益</text>
					<text>总成交金额</text>
				</view>
				<view class="summary-content row">
					<text>100</text>
					<text>42</text>
					<text>344</text>
					<text>722226</text>
				</view>

			</view>
			<view class="strategy-btn">
				<u-button type="success" shape="square" size="mini" class="share">分享</u-button>
				<view class="set">
					<u-button type="warning" shape="square" size="mini" class="share" @click="$u.func.route('/pages/deal/dealDetail')">成交明细</u-button>
					<u-button type="success" shape="square" size="mini" class="share"  @click="$u.func.route2('/pages/coin/deal')">历史收益</u-button>
	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// dropdown
				market: 1,
				model: 1,
				coin: 1,
				marketList: [{
						label: "Huobi现货",
						value: 1,
					},
					{
						label: "Binance现货",
						value: 2,
					},
					{
						label: "Okex现货",
						value: 3,
					},
				],
				modelList: [{
						label: "AI金字塔",
						value: 1,
					},
					{
						label: "智能高频",
						value: 2,
					},
					{
						label: "现货网络",
						value: 3,
					},
					{
						label: "现货金字塔",
						value: 4,
					},
				],
				coinList: [{
						label: "BTC1S/USDT",
						value: 1,
					},
					{
						label: "BTC/USDT",
						value: 2,
					},
				],
			};
		},

		components: {},

		computed: {},

		mounted() {},

		methods: {
			dealDetail() {

			}
		},
	};
</script>
<style lang='scss' scoped>
	.content {
		color: aliceblue;
		padding-bottom: 100rpx;

		.item-strategy {
			display: flex;
			flex-direction: column;
			background-color: #151e3d;
			border-radius: 20rpx;
			color: cornflowerblue;
			margin: 20rpx;
			padding: 20rpx;

			.item-name {
				margin-bottom: 15rpx;
				font-size: 24rpx;
			}

			.summary {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				.row {
					display: flex;
					margin-bottom: 5rpx;
					flex-direction: row;
					justify-content: space-between;

					.strategy-name {
						color: aliceblue;
					}

					.strategy-status {
						color: aqua;

						&.stop {
							color: orangered;
						}
					}

					text {
						text-align: center;
					}

					&.summary-title {
						font-size: 26rpx;
						margin: 10rpx 0 20rpx 0;
					}

					&.summary-content {
						font-size: 24rpx;
						color: aliceblue;

						text {
							display: flex;
							min-width: 80rpx;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

			.strategy-btn {
				width: 90vw;
				display: flex;
				// align-content: flex-end;
				// align-items: flex-end;
				flex-direction: row;
				justify-content: flex-end;

				.u-btn {
					margin-left: 10rpx;
					margin-right: 0;
				}
			}

			.head {
				width: 90vw;
				color: #ff9900;
				display: flex;
				justify-items: baseline;
				justify-content: space-between;
			}
			.date {
				color: aliceblue;
				margin-bottom: 10rpx;
			}
		}

		.earn {
			background-color: #c09358;
			width: 94vw;
			min-height: 240rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.earn-tab {
				padding: 30rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;

				.benefit {
					font-size: 32rpx;
				}
			}
		}

		.earn-item {}
	}
</style>
